<template>
  <div id="couponSecond">
    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" width="50" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="user.userName"
        label="用户昵称"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="user.mobile"
        label="手机号"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="user.mobile"
        label="手机量账号"
        min-width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.grantType === 'PUBLIC' ? scope.row.schoolMobile : '-' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="user.dpAccount"
        label="大鹏号"
        min-width="100"
      ></el-table-column>
      <el-table-column prop="grantType" label="发放类型" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.grantType | filterName('grant_types') }}
        </template>
      </el-table-column>
      <el-table-column
        prop="grantTime"
        label="发放时间"
        min-width="150"
      ></el-table-column>
      <el-table-column prop="status" label="使用状态" width="130">
        <template slot-scope="scope">
          {{ scope.row.status | filterName('coupon_status') }}
        </template>
      </el-table-column>
      <el-table-column prop="useTime" label="使用时间" min-width="150">
        <template slot-scope="scope">
          {{ scope.row.useTime ? scope.row.useTime : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="usageScenario" label="使用场景" min-width="150">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.ykScenes" :key="index">
            {{ item ? item : '-' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="orderId" label="订单号" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.orderId ? scope.row.orderId : '-' }}
        </template>
      </el-table-column>
      <el-table-column
        key="itemLabel"
        prop="itemLabel"
        label="关联直播间"
        min-width="120"
      >
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.liveRoomNumber" :key="index">
            {{ item ? item : '-' }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>
<script>
import topSearch from '@component/intergralManagement/couponManagement/secondTopSearch' // 上部搜索条件
import { saveScrollMixins } from '@/mixins/saveScroll'
import { getSearchList } from '@/api/workManagement/videoBatch'
import { getCouponsUsers } from '@/api/couponsIntegral/coupons' // 接口
export default {
  name: 'couponSecond',
  msg: '优惠券管理-查看详情',
  mixins: [saveScrollMixins],
  components: {
    topSearch
  },
  data() {
    return {
      loading: false,
      total: 0,
      grantTypes: false,
      // 搜索条件
      formInline: {
        dpAccount: '', // 大鹏号
        orderId: '', // 订单号
        status: '', // 使用状态
        createTime: [], // 发放时间
        grantStartTime: '', // 发放的开始时间
        grantEndTime: '', // 发放的结束时间
        useTime: [], // 使用时间
        useStartTime: '', // 使用开始时间
        useEndTime: '' // 使用结束时间
      },
      // 表格数据
      tableData: [],
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      couponId: ''
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.couponId = this.$route.query.couponId
    this.searchList()
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      delete obj.useTime
      let params = obj
      getCouponsUsers(
        this.couponId,
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
          this.tableData[0].grantType === 'PUBLIC'
            ? !this.grantTypes
            : grantTypes
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 编辑后，刷新列表 */
    refresh() {
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#batchList {
}
</style>
